<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2023-07-09 11:20:40
 * @LastEditors: 计都 3038199036@qq.com
 * @LastEditTime: 2023-07-14 09:31:25
-->

<template>
  <!-- active:{{ active }} -->
  <!-- 首页 -->
  <div class="index" v-if="active == 0">
    <!-- 搜索框 -->
    <van-search shape="round" v-model="value" placeholder="搜索:目的地/酒店/景点/航班号" />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :loop=false indicator-color="skyblue" @change="onChange">
      <van-swipe-item>
        <!-- 宫格 -->
        <div class="gridMainDiv">
          <van-grid :border="false">
            <div :style="{ backgroundImage: value.color, backgroundColor: value.color }" v-for="value in gridData"
              class="gridDiv">
              <van-grid-item :key="value.id" :icon="value.img" :text="value.name" />
            </div>
          </van-grid>
        </div>
      </van-swipe-item>
      <van-swipe-item :style="{ height: height + 'px' }">
        <!-- 宫格 -->
        <div class="gridMainDiv">
          <van-grid :border="false">
            <div :style="{ backgroundImage: value.color, backgroundColor: value.color }" v-for="value in gridData"
              class="gridDiv">
              <van-grid-item :key="value.id" :icon="value.img" :text="value.name" />
            </div>
            <div :style="{ backgroundImage: value.color, backgroundColor: value.color }" v-for="value in gridData"
              class="gridDiv">
              <van-grid-item :key="value.id" :icon="value.img" :text="value.name" />
            </div>
          </van-grid>
        </div>
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div style="text-align: center;">
          <div :class="active == 0 ? 'swipeIndicatorActive' : 'swipeIndicatorInactive'"> </div>
          <div :class="active == 1 ? 'swipeIndicatorActive' : 'swipeIndicatorInactive'"> </div>
        </div>
      </template>
    </van-swipe>
    <van-row>
      <van-col span="12">
        <!-- 特价直播 -->
        <div class="myDiv">
          <van-row>
            <van-col span="10">
              <van-image width="73" height="20" src="https://images4.c-ctrip.com/target/0zc71120008g0ha4z93C6.png" />
            </van-col>
            <van-col span="14" style="text-align: right;">
              <van-tag size="medium" color="#ffebe3" text-color="#ff4607">特价好货直播中</van-tag>
            </van-col>
          </van-row>
          <div class="swipeDiv">
            <van-swipe class="my-swipe1" :autoplay="3000" indicator-color="white">
              <van-swipe-item>示例1</van-swipe-item>
              <van-swipe-item>示例2</van-swipe-item>
              <van-swipe-item>示例3</van-swipe-item>
              <van-swipe-item>示例4</van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <!-- 携程精选榜 -->
        <div class="myDiv">
          <!-- 布局设计2 -->
          <van-row>
            <van-col span="10">
              <van-image width="73" height="20" src="https://images4.c-ctrip.com/target/0zc6g120008g0hcb587E5.png" />
            </van-col>
            <van-col span="14" style="text-align: right;">
              <van-tag size="medium" color="#fdefd2" text-color="#ae6e15">权威排行榜</van-tag>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="12">name</van-col>
            <van-col span="12">Ranking</van-col>
          </van-row>
          <van-row>
            <van-col span="12">name</van-col>
            <van-col span="12">Ranking</van-col>
          </van-row>
          <van-row>
            <van-col span="12">name</van-col>
            <van-col span="12">Ranking</van-col>
          </van-row>
          <van-row>
            <van-col span="12">name</van-col>
            <van-col span="12">Ranking</van-col>
          </van-row>
        </div>
      </van-col>
    </van-row>
    <div class="child_continer">
      <van-badge :content="5">
        <div class="child" />
      </van-badge>
      <van-badge :content="10">
        <div class="child" />
      </van-badge>
      <van-badge content="Hot">
        <div class="child" />
      </van-badge>
      <van-badge dot>
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
      <van-badge :content="99">
        <div class="child" />
      </van-badge>
    </div>

    <van-floating-bubble axis="xy" icon="link-o" magnetic="x" @offset-change="onOffsetChange" @click="showShare = true" />
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
    <!-- 优惠券列表 -->
    <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
      <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
        @change="on_Change" @exchange="onExchange" />
    </van-popup>
    <!-- <van-cell title="显示分享面板" @click="showShare = true" /> -->
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <van-notice-bar left-icon="volume-o" text="w我也不知道到底该写上一点什么，既然要凑字数铺满这整一行的字，那我就随便写上一点东西吧~" />

    <van-collapse v-model="activeNames">
      <van-collapse-item title="热销商品" name="1">

        <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
          <template #tags>
            <van-tag plain type="primary">标签</van-tag>
            <van-tag plain type="primary">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
        <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
          <template #tags>
            <van-tag plain type="primary">标签</van-tag>
            <van-tag plain type="primary">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
        <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
          <template #tags>
            <van-tag plain type="primary">标签</van-tag>
            <van-tag plain type="primary">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
        <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
          <template #tags>
            <van-tag plain type="primary">标签</van-tag>
            <van-tag plain type="primary">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
        <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
          <template #tags>
            <van-tag plain type="primary">标签</van-tag>
            <van-tag plain type="primary">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>



      </van-collapse-item>
    </van-collapse>


    <van-cell v-for="item in list" :key="item" :title="item" />

    <van-back-top right="15vw" bottom="10vh" />
  </div>
  <!-- 社区 -->
  <div class="community" v-if="active == 1">
    <!-- van-nav-bar -->
    <van-nav-bar title="" left-text="返回">
      <template #left>
        <van-icon name="arrow-left" @click="onClickLeft" size="21px" color="rgb(51,51,51)" />
        <div @click="onClickToPage" style="color: #222222;font-weight: 700;font-size: 15px;">全球 <van-icon
            name="arrow-down" size="12px" color="rgb(51,51,51)" /></div>
        <!-- 搜索框 -->
        <van-search shape="round" v-model="value" placeholder="搜索:目的地/景点/话题" />
      </template>
      <template #right>
        <van-image round width="21px" height="21px" src="https://pages.c-ctrip.com/you/lvpai-home-defaultavat.jpg" />
      </template>
    </van-nav-bar>
    <!-- 使用布局去做 -->

    <van-tabs color="#2fcfbb" title-active-color="#222222" title-inactive-color="#222222" v-model:active="tabActive">
      <van-tab v-for="(value, index) in tabData" :title="value">
        <div v-if="tabActive == 0" class="myCard" v-for="item in myCardData">
          <van-image height="253.44" :src="item.img" />
          <van-text-ellipsis class="title" rows="2" :content="item.title" />
          <div class="bottom">
            <van-row>
              <van-col span="18">
                <van-image round width="24" height="24" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                <van-text-ellipsis class="username" :content="item.username" />
              </van-col>
              <van-col span="6">
                <div class="icon">
                  <van-icon size="18" :name="item.userPhoto"></van-icon>
                </div>
                <div class="num">{{ item.num }}</div>
              </van-col>
            </van-row>
          </div>
        </div>
        <div v-if="tabActive == 1" class="Plus_Card">
          <!-- <a>sidbcisbdisbdi</a> -->
          <van-grid :gutter="10" column-num="2">
            <van-grid-item v-for="value in 80" :key="value" icon="photo-o" text="图片" />
          </van-grid>
        </div>
        <div v-if="tabActive == 2" class="myCard" v-for="item in myCardData">
          <van-image height="253.44" :src="item.img" />
          <van-text-ellipsis class="title" rows="2" :content="item.title" />
          <div class="bottom">
            <van-row>
              <van-col span="18">
                <van-image round width="24" height="24" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                <van-text-ellipsis class="username" :content="item.username" />
              </van-col>
              <van-col span="6">
                <div class="icon">
                  <van-icon size="18" :name="item.userPhoto"></van-icon>
                </div>
                <div class="num">{{ item.num }}</div>
              </van-col>
            </van-row>
          </div>
        </div>
        <div v-if="tabActive == 3" class="Plus_Card">
          <!-- <a>sidbcisbdisbdi</a> -->
          <van-grid :gutter="10" column-num="2">
            <van-grid-item v-for="value in 20" :key="value" icon="photo-o" text="图片" />
          </van-grid>
        </div>
        <div v-if="tabActive == 4" class="Plus_Card">
          <van-grid :border="false" :column-num="3" gutter="15">
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
            </van-grid-item>
          </van-grid>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 发布送积分按钮 -->
    <van-sticky style="text-align: center;" :offset-bottom="50" position="bottom">
      <van-image width="85" height="90" src="https://pages.c-ctrip.com/you/livestream/lvpai_publish_new_btn.png" />
    </van-sticky>
    <van-cell v-for="item in list" :key="item" :title="item" />
    <van-back-top right="15vw" bottom="10vh" />
  </div>


  <div class="massage" v-if="active == 2">
    <!-- 消息 -->
    <!-- <van-icon name="arrow-left" @click="onClickLeft"  size="25px" color="rgb(51,51,51)" style="position: absolute;
        left: 4vw;top:3.8vw;
        font-size: 0.9em;"/>
    <h5 style="position: absolute;
        left: 8.5vw;top:-3.8vw;
        font-size: 0.95em;"
        @click="onClickLeft"  >返回</h5>-->
    <!-- <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
    </van-pull-refresh> -->
    <van-skeleton>
      <template #template>
        <div :style="{ display: 'flex', width: '100%' }">
          <div style="position: relative;padding-top: 15%;">
            <van-image width="10rem" height="10rem" fit="cover" round
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
          </div>
          <div :style="{ flex: 1, marginLeft: '1px' }">
            <van-skeleton-paragraph row-width="60%" />
            <h3>&nbsp;&nbsp;&nbsp;用户信息</h3>
            <van-skeleton-paragraph />
            <h3 class="topMessage">订单信息</h3>
            <van-skeleton-paragraph />
            <h3 class="topMessage">里程信息</h3>
            <van-skeleton-paragraph />
            <h3 class="topMessage">回执信息</h3>
          </div>
        </div>

      </template>
    </van-skeleton>
    <van-skeleton title round :row="0" :loading="false">
      <h3>&nbsp;&nbsp;&nbsp;来自系统的消息</h3>
      <van-notice-bar left-icon="volume-o" text="w我也不知道到底该写上一点什么，既然要凑字数铺满这整一行的字，那我就随便写上一点东西吧~" />
      <div class="myMessage">
        <h5>你好&欢迎</h5>&nbsp;&nbsp;&nbsp;<van-tag type="primary">标签</van-tag>
        <van-tag type="success">标签</van-tag>
        <van-tag type="danger">标签</van-tag>
        <van-tag type="warning">标签</van-tag>

      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>&nbsp;&nbsp;&nbsp;<van-tag type="danger">标签</van-tag>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
      <div class="myMessage">
        <h5>你好&欢迎</h5>
      </div>
    </van-skeleton>
    <van-cell v-for="item in list" :key="item" :title="item" />

    <van-back-top right="15vw" bottom="10vh" />
  </div>

  <div v-if="active == 3">
    <!-- 表单 -->
    <van-watermark content="这是水印" />
    <van-icon name="arrow-left" @click="onClickLeft" size="25px" color="rgb(51,51,51)" style="position: absolute;
        left: 4vw;top:3.8vw;
        font-size: 0.9em;" />
    <h5 style="position: absolute;
        left: 8.5vw;top:-3.8vw;
        font-size: 0.95em;" @click="onClickLeft">返回</h5>
    <div class="pswnote">
      <van-notice-bar mode="closeable">自己的密码总该记得吧~</van-notice-bar>
    </div>
    <van-form @submit="onSubmit" style="position: absolute;top: 25vw;display: flex;">
      <van-cell-group @touchstart.stop="show = true" inset>
        <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
        <van-number-keyboard :show="show" @blur="show = false" @input="onInput" @delete="onDelete" />
      </van-cell-group>

      <div style="margin-right: 10px;">
        <van-button style="height: 100%;" block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <div class="net_img">
      <van-empty image="network" image-size="300" description="请登录" />
    </div>

  </div>
  <!-- 底部导航栏 -->
  <van-tabbar inactive-color="#666666" v-model="active">
    <!-- @change="onTabBarChange"切换并隐藏tabbar -->
    <!-- --van-tabbar-item-text-color 设置导航栏选中的标签的文字颜色 -->
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="miniprogram-o">社区</van-tabbar-item>
    <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
    <van-tabbar-item icon="contact">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import 'vant/es/toast/style';

// 社区页面的变量以及方法
const myCardData = [
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto: "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto: "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto: "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto: "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto: "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
]
const onClickLeft = () => {
  // 返回到首页
  active.value = 0
  // 显示tabbar
  // hidden.value = false
}
const onClickToPage = () => {
  showToast({
    message: '跳转到全球页',
    position: 'top',
  });
}
const tabActive = ref(0)
const tabData = ["发现", "徒步", "避暑", "看海", "玩乐", "酒店", "美食"]
// 首页搜索框
const value = ref('');
// 首页宫格的数组
const gridData = [
  {
    id: "1",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel.png",
    name: "酒店",
    color: "-webkit-gradient(linear,left top,left bottom,from(#fa5956),to(#fb8650))",
  },
  {
    id: "2",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/flight.png",
    name: "机票",
    color: "-webkit-gradient(linear,left top,left bottom,from(#3c83fa),to(#50b2fa))",
  },
  {
    id: "3",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/train_ticket.png",
    name: "火车票",
    color: "-webkit-gradient(linear,left bottom,left top,from(#66a4ff),to(#5e80ff))",
  },
  {
    id: "4",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/vacation.png",
    name: "旅游",
    color: "-webkit-gradient(linear,left top,left bottom,from(#2fc3b6),to(#52d9b3))",
  },
  {
    id: "5",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/gs.png",
    name: "攻略",
    color: "-webkit-gradient(linear,left bottom,left top,from(#ffa846),color-stop(99%,#ff8939))",
  },
  {
    id: "6",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel_inn.png",
    name: "民宿",
    color: "#fff5f1",
  },
  {
    id: "7",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/flight_package.png",
    name: "机+酒",
    color: "#eff9ff",
  },
  {
    id: "8",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/bus_ticket.png",
    name: "汽车",
    color: "#f2f5ff",
  },
  {
    id: "9",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/ticket.png",
    name: "门票",
    color: "#ecfcf8",
  },
  {
    id: "10",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/food.png",
    name: "美食",
    color: "#fff9f2",
  },
  {
    id: "11",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel_sale.png",
    name: "特价",
    color: "#fff5f1",
  },
  {
    id: "12",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/airport_transfer.png",
    name: "接送机",
    color: "#eff9ff",
  },
  {
    id: "13",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/car.png",
    name: "租车",
    color: "#f2f5ff",
  },
  {
    id: "14",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/weekend.png",
    name: "周边游",
    color: "#ecfcf8",
  },
  {
    id: "15",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/shop.png",
    name: "购物",
    color: "#fff9f2",
  },
]
// 轮播的高度
const height = ref(184)
// 轮播切换的事件
const onChange = (index) => {
  if (index == 1) {
    // 当轮播切换到第二张的时候，增大轮播高度
    // height：354
    // height.value = 354
    // 184 -> 354 +170
    for (let i = 0; i <= 170; i++) {
      setTimeout(() => {
        height.value++
      }, 1 * i);
    }
  } else {
    // 当轮播切换到第移张的时候，减小轮播高度
    // height：354
    // height.value = 184
    for (let i = 0; i <= 170; i++) {
      setTimeout(() => {
        height.value--
      }, 1 * i);
    }
  }
}
// 底部导航栏的变量
const active = ref(0);
// const hidden = ref(false)
const username = ref('');
const password = ref('');
// const onTabBarChange = (active) => {
//   // 当底部导航栏选中 社区、消息、我的时，自动隐藏
//   if (active == 0) {
//     hidden.value = false
//   } else {
//     hidden.value = true
//   }
// }
const activeNames = ref(['1']);

const onSubmit = (values) => {
  console.log('submit', values);
  // values:
  // {
  //   username:'briup',
  //   password:123,
  // }
  const { username, password } = values
  console.log('onSubmit - username:', username);
  console.log('onSubmit - username,password:', username, password);
  if (username == 'briup') {
    if (password == 123321) {
      console.log("登录成功");
    }
  }
};

const showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    showToast('刷新成功');
    loading.value = false;
    count.value++;
  }, 1000);
};
const list = [...Array(0).keys()];
const coupon = {
  available: 1,
  condition: '无门槛\n最多优惠1200元',
  reason: '电视抽奖',
  value: 10000,
  name: '仅限购买C919',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '10000',
  unitDesc: '元',
};

const onOffsetChange = (offset) => {
  // showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
};

const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const on_Change = (index) => {
  showList.value = false;
  chosenCoupon.value = index;
};
const onExchange = (code) => {
  coupons.value.push(coupon);
};

const show = ref(false);
const onInput = (value) => showToast(value);
const onDelete = () => showToast('删除');


</script>
<style>
:root {
  /* --van-tabbar-item-active-color:hotpink; */
  --van-field-placeholder-text-color: #999999;
  --van-search-input-height: 30px;
  --van-grid-item-content-background: #00000000;
  --van-nav-bar-icon-color: var(--van-field-placeholder-text-color)
}

body {
  background-color: #f4f4f4;
}

/* 轮播样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #ffffff;
}

.my-swipe1 .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 106px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
<style lang="less" scoped>
/* 宫格中遍历的元素div */
.gridMainDiv {
  margin: 12px;
  border-radius: 10px;
  overflow: hidden;
}

.gridDiv {
  width: calc(100% / 5);
  display: inline-block;
}

/* :deep(.van-grid){
  } */
:deep(.van-grid-item__content) {
  height: 58px;
}

/* 首页搜索框 */
.index {
  :deep(.van-search__content) {
    border: 1.8px solid #0086f6;
    background: #ffffff;
  }
}

// 社区页样式
.community {
  .myCard {
    display: inline-block;
    width: calc(50% - 15px);
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 6px;
    background-color: #ffffff;
    overflow: hidden;

    .Plus_Card {
      position: absolute;
      bottom: 5vw;
      display: inline-block;
      width: 96%;
      height: 96%;
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 6px;
      // background:cyan;
      overflow: hidden;


    }

    .title {
      color: #222222;
      font-size: 14px;
      margin-top: 8px;
      margin-left: 10px;
      // padding-right: 10px;
      width: 178px;
    }

    .bottom {
      margin: 8px 10px 12px 10px;
    }

    .username {
      float: right;
      width: 91.5px;
      height: 24px;
      line-height: 24px;
      color: #333333;
      font-size: 12px;
    }

    .icon {
      float: left;
      padding-top: 3px;
      padding-left: 10px;

    }

    .num {
      color: #222222;
      font-size: 12px;
      float: right;
      // background:cyan;
      height: 24px;
      line-height: 24px;
    }
  }

  :deep(.van-tabs__wrap) {
    margin-bottom: 20px;
  }

  :deep(.van-tab) {
    width: 70px;
  }

  :deep(.van-tab--active) {
    .van-tab__text {
      font-size: 21px;
      font-weight: 400;
    }
  }

  :deep(.van-tab__text) {
    font-size: 16px;
  }

  :deep(.van-search__content) {
    background: #f4f4f4;
  }

  :deep(.van-icon-search) {
    font-size: 14px;
  }

  :deep(.van-search) {
    width: 286px;
  }
}

:deep(#van-search-1-input) {
  font-size: 15px;
}

/* 底部导航栏 */
:deep(.van-tabbar-item--active > .van-tabbar-item__text) {
  color: #666666
}

/* 轮播图的指示器-公共样式 */
.swipeIndicatorInactive,
.swipeIndicatorActive {
  height: 4px;
  border-radius: 2px;
  display: inline-block;
  margin: 0 2px;
}

/* 轮播图的指示器-未被选中 */
.swipeIndicatorInactive {
  width: 4px;
  background-color: #ccc;
}

/* 轮播图的指示器被选中 */
.swipeIndicatorActive {
  width: 14px;
  background-color: #0086f6;
}

/* 特价直播div */
.myDiv {
  width: calc(100% - 28px);
  display: inline-block;
  height: 148px;
  padding: 8px;
  margin-left: 8px;
  border-radius: 8px;
  background: #fff;

  .left,
  .right {
    // border: 1px solid red;
    // width: calc(50% - 4px);
    height: 20px;
  }

  .left {
    float: left;
    width: 45%;
  }

  .right {
    float: right;
    text-align: right;
    width: 55%;
  }

  // .swipeDiv{
  //   // border: 1px solid red;
  //   width: 100%;
  //   height: 100%;
  // }
}

.message {
  background: #f4f4f4;
}

.myMessage {
  position: relative;
  display: flex;
  background-color: white;
  height: 60px;
  width: 90%;
  border-radius: 5px;
  text-align: left;
  margin-top: 1vw;
  margin-left: 2.5vw;
  padding-left: 3vw;
  overflow: scroll;
}

.topMessage {
  position: relative;
  display: flex;
  background-color: white;
  height: 30px;
  width: 90%;
  border-radius: 5px;
  text-align: left;
  font-weight: 120;
  margin-top: -20px;
  margin-left: 2.5vw;
  padding-left: 3vw;
  padding-top: 5vw;
  overflow: scroll;
}

.child_continer {
  position: relative;
  background: white;
  display: flex;
  border-radius: 5px;
  margin: 2vw;
  padding-top: 2vw;
  height: auto;
  overflow-x: scroll;
}

.child {
  width: 40px;
  height: 40px;
  background: #93b5f891;
  border-radius: 4px;
  margin: 2.5vw;
}

.pswnote {
  position: absolute;
  height: auto;
  width: 100%;
  top: 12vw;
}

.net_img {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 10vw;
}
</style>
